<template>
  <header>
    <span id="text1">团检详情管理</span>
  </header>

  <div class="center">
    <div class="search">
      <TzwInput
      inputTitle="信息查询:"
      Tplaceholder="请输入体检人姓名或电话"
      @getInput="getSearchInput"
      ></TzwInput>

      <TzwSelect
      v-model:Tmodel="ChosedGender"
      :Tgroup="gender"
      @getName="getGender"
      title="性别筛选:"
    ></TzwSelect>
    <TzwSelect
      v-model:Tmodel="ChosedMerry"
      :Tgroup="merry"
      @getName="getMerry"
      title="是否已婚:"
    ></TzwSelect>
    <TzwSelect
      v-model:Tmodel="ChosedInstitution"
      :Tgroup="allInstitution"
      @getName="getInstitution"
      title="选择机构:"
    ></TzwSelect>
    <TzwSelect
      v-model:Tmodel="chosedOrder"
      :Tgroup="allOrder"
      @getName="getOrder"
      title="体检套餐:"
    ></TzwSelect>
    <TzwSelect
      v-model:Tmodel="ChosedStatus"
      :Tgroup="status"
      @getName="getStatus"
      title="体检状态:"
    ></TzwSelect>
    </div>
    <div style="display: flex; justify-content: space-between; width: 50%; height: 2.5rem; padding: 0 2rem; box-sizing: border-box;" class="buttonManage">
      <button style="width: 4.5rem;" @click="searchOne">查询</button>
      <button style="width: 4.5rem;">重置</button>
      <!-- <button style="width: 9rem;">上传团检名单</button> -->
      <button style="width: 4.5rem;" @click="dialogTableVisible = true">添加</button>
      <button style="width: 4.5rem;" @click="deleteAll">删除</button>
      <button style="width: 6.5rem;" @click="dialogOrder = true">批量预约</button>
      <button style="width: 6.5rem;" @click="cancelAll=true">取消预约</button>
      <!-- <button style="width: 6.5rem;">导出名单</button> -->
    </div>
    <TzwTable :head="tableHead" :tableData="tableData2" class="TzwTable" @getChoose="choosePerson">
        <button class="operationB" @click="edit" >编辑</button>
        <button class="operationB" @click="oneAppointment">预约</button>
        <button class="operationB" @click="oneCancel">取消</button>
    </TzwTable>
    <el-dialog v-model="dialogTableVisible" title="添加个人体检信息" style="width: 55rem; height: 30rem;">
    <div style="display: flex; justify-content: space-between; margin-top: -3rem;">
      <div style="margin-left: -2rem; height: 18rem; width: 25rem; display: flex; justify-content: space-between; flex-direction: column; padding: 0.5rem;">
      <TzwInput
      inputTitle="体检人姓名:"
      :Tplaceholder="editName"
      @getInput="getSearchInputName"
      ></TzwInput>
      <TzwInput
      inputTitle="体检人电话:"
      :Tplaceholder="editTel"
      @getInput="getSearchInputTel"
      ></TzwInput>
      <TzwInput
      inputTitle="身份证号码:"
      :Tplaceholder="editIdNum"
      @getInput="getSearchInputIdCard"
      ></TzwInput>
      <TzwInput
      inputTitle="公司的部门:"
      :Tplaceholder="editinsti"
      @getInput="getSearchInputDepartment"
      ></TzwInput>
    </div>
    <div style="height: 18rem; width: 25rem; display: flex; justify-content: space-between; flex-direction: column; padding: 0.5rem;">
      <TzwSelect
      v-model:Tmodel="ChosedGender"
      :Tgroup="gender"
      @getName="getGender"
      title="选择性别:"
    ></TzwSelect>
      <TzwSelect
      v-model:Tmodel="ChosedMerry"
      :Tgroup="merry"
      @getName="getMerry"
      title="婚姻状态:"
    ></TzwSelect>
    <TzwSelect
      v-model:Tmodel="ChosedInstitution"
      :Tgroup="allInstitution"
      @getName="getInstitution"
      title="体检机构:"
    ></TzwSelect>
    <TzwSelect
      v-model:Tmodel="chosedOrder"
      :Tgroup="allOrder"
      @getName="getOrder"
      title="体检套餐:"
    ></TzwSelect>
    </div>
    </div>
    <div style="height: 2rem; width: 50rem; display: flex; justify-content: space-evenly; padding-top: 1rem;">
      <button class="addButton" @click="addPerson">确认</button>
      <button class="addButton" >取消</button>
    </div>
  </el-dialog>
  <el-dialog v-model="dialogOrder" title="确认体检时间" width="30%" left>
    <div style="margin-top: 2rem;">
      <span style="font-size: 1.2rem; ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;选择时间:&nbsp;&nbsp;</span>
    <el-date-picker
    style="width: 15.1rem; "
        v-model="valueTime"
        type="date"
        placeholder="请选择时间"
        size="large"
      />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogOrder = false">取消</el-button>
        <el-button type="primary" @click="appointment">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="cancelAll" title="确认取消预约" width="30%" left>
    确认取消预约吗？
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelAll = false">取消</el-button>
        <el-button type="primary" @click="cancelAppointment">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
  <div style="padding-left: 70%; width: 100%; padding-top: 0.5rem; margin-top: 1rem;">
    <TzwPage  :sum="pageSum" :size="pageSize" :now="nowPage" @prePage="toPrePage" @nextPage="toNextPage"></TzwPage>
  </div>
  </div>
</template>
<style lang="less" scoped>
header {
  margin-left: 1rem;
  margin-right: 1rem;
  font-size: 1.4rem;
  line-height: 3rem;
  height: 4rem;
  background-color: white;

  #text1 {
    position: relative;
    top: 0.4rem;
    left: 1rem;
    font-size: 1.4rem;
    line-height: 3rem;
  }
  .m-2 {
    position: relative;
    top: 0rem;
    left: 2rem;
  }
}
.center {
  margin: auto;
  height: 87%;
  background-color: white;
  margin-left: 1rem;
  margin-top: 1rem;
  margin-right: 1rem;
  padding: 1rem;
  box-sizing: border-box;
  .search {
    height: 15.5%;
    padding-top: 0.5rem;
    line-height: 15%;
    width: 100%;
    margin-bottom: 1rem;
    border: 1px solid #e3e1e1;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .buttonManage button{
    border-radius: 0.3rem; border: #eee 1px solid; background-color: white; padding: 0;font-size: 1.2rem;
    &:hover{
      background-color: rgba(00, 00, 00, 0.2);
    }
  }
  .addButton{
    border-radius: 0.3rem; border: mistyrose 1px solid; background-color: white; padding-bottom: 2.3rem;font-size: 1.6rem;
    &:hover{
      background-color: rgb(223, 220, 220);
    }
  }
  :deep(.el-dialog__title){
    font-size: 2rem;
  }
  :deep(.el-dialog__header){
    padding: 2rem;
    width: 50rem;
    height: 2rem;
  }
  :deep(.el-dialog__body){
    padding: 2rem;
  }
  :deep(.el-dialog__headerbtn){
    width: 4rem;
    height: 4rem;}
  }
.TzwTable{
  margin-top: 1rem;
  .operationB{
    border: none; background-color: white; color: #1abc9c; font-size: 1rem; width: 2.5rem; height: 1.2rem; padding: 0;
    &:hover{
      color: darkslategrey;
    }
  }
}
</style>

<script lang="ts" setup>
import { reactive, ref } from "vue";``
import TzwInput from "../components/TzwInput.vue";
import TzwSelect from "../components/TzwSelect.vue";
import TzwTable from "../components/TzwTable.vue";
import TzwPage from "../components/TzwPage.vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import type { Action } from 'element-plus'
import {updateCanclePreBatches,updatePreDateBatches,findAll,findAllInsOrder,findSubOrganOrder,addPersonExam,delete1All} from '../apis/groupDetail'
import { useRoute } from "vue-router";
import axios from "axios";
let cancelAll=ref(false)
let pageSize=ref(8)
let pageSum=ref(12)
let nowPage=ref(1)
let dialogTableVisible=ref(false)
let dialogOrder=ref(false)
let allInstitutionOrder=[]
let allInstitution=reactive([{name:'加载中',id:0}])
let allOrder=reactive([])
let chosedOrder=ref('请先选择机构')
const valueTime = ref('')
let cancelAppointment=()=>{
  let ids=[]
  deleteMutli.forEach((v)=>{
    ids.push(v.id)
  })
  updateCanclePreBatches({ids:ids}).then((res)=>{
    ElMessage('取消成功')
    setTimeout(()=>{
      history.go(0)
    },500)
  })
}
let editName=ref('请输入体检人姓名')
let editTel=ref('请输入体检人电话')
let editIdNum=ref('请输入体检人姓名')
let editinsti=ref('请输入部门名称')
let editState=0
let edit=()=>{
  editState=1
  dialogTableVisible.value = true;
  event.target.parentNode.parentNode.children[0].children[0].click()
  editName.value=deleteMutli[0].name
  editTel.value=deleteMutli[0].tel
  editIdNum.value=deleteMutli[0].idCard
  editinsti.value=deleteMutli[0].department
  ChosedGender.value=deleteMutli[0].sex
  ChosedMerry.value=deleteMutli[0].marriage
  ChosedInstitution.value=deleteMutli[0].organName
  chosedOrder.value=deleteMutli[0].comboName
}
watch(dialogTableVisible,()=>{
  if(dialogTableVisible.value==false){
    history.go(0)
  }
})
watch(dialogOrder,()=>{
  if(dialogOrder.value==false){
    history.go(0)
  }
})
watch(cancelAll,()=>{
  if(cancelAll.value==false){
    history.go(0)
  }
})
let oneAppointment=()=>{
  dialogOrder.value = true
  event.target.parentNode.parentNode.children[0].children[0].click()
}
let oneCancel=()=>{
  cancelAll.value = true
  event.target.parentNode.parentNode.children[0].children[0].click()
}
let appointment=()=>{
  dialogOrder.value=false;
  let hh=String(valueTime.value).split(' ')
  let month=''
  let timed=[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]
  timed.forEach((v,i)=>{
    if(v==hh[1]){
      if((i+1)>=10){
        month=String(i+1)
      }else{
        month='0'+(i+1)
      }
    }
  })
  let timeAll=hh[3]+'-'+month+'-'+hh[2]
  let ids=[]
  deleteMutli.forEach((v)=>{
    ids.push(v.id)
  })
  updatePreDateBatches({
    date:timeAll,
    ids:ids
  }).then((res)=>{
    ElMessage('预约成功')
    setTimeout(()=>{
      history.go(0)
    },500)
  })
}
let toPrePage=(ev)=>{
  console.log(ev);
  nowPage.value=ev
}
let toNextPage=(ev)=>{
  console.log(ev);
  nowPage.value=ev
}
watch(nowPage,()=>{
  tableData2.length=0;
  tableData2.push(...tableData1.slice((nowPage.value-1)*pageSize.value,pageSize.value*nowPage.value))
})
let tableHead=[
  {name:'编号',width:'3rem'},
  {name:'姓名',width:'6rem'},
  {name:'电话',width:'8rem'},
  {name:'身份证号码',width:'11rem'},
  {name:'性别',width:'3rem'},
  {name:'婚否',width:'3rem'},
  {name:'所属部门',width:'6rem'},
  {name:'体检套餐',width:'10rem'},
  {name:'体检机构',width:'10rem'},
  {name:'体检日期',width:'6rem'},
  {name:'状态',width:'5rem'},
  {name:'操作',width:'10rem'},
]
let tableData1=reactive([])
let tableData2=reactive([])
let tableDataAll=reactive([])
const route=useRoute()
let uuu=()=>{
  console.log(88888);
}
let addPerson=()=>{
  let person={
    "comboId": chosedOrderId.value,
  "companyId": Number(route.query.companyId),
  "date": "",
  "department": SearchInputDepartment.value,
  "idCard": SearchInputIdCard.value,
  "marriage": ChosedMerry.value,
  "name": SearchInputName.value,
  "sex": ChosedGender.value,
  "subOrganId": chosedSubOrganId.value,
  "tel": SearchInputTel.value
  }
  if(editState==0){
    addPersonExam(person).then((res)=>{  
    ElMessage('添加成功')
    setTimeout(()=>{
      history.go(0)
    },500)
  }) 
  }else{
    delete1All({ids:[deleteMutli[0].id]}).then(()=>{
      addPersonExam(person).then((res)=>{  
    ElMessage('修改成功')
    setTimeout(()=>{
      history.go(0)
    },500)
  })
    })
  }
}
let deleteMutli=reactive([])
let choosePerson=(ev)=>{
  if(ev.length || ev=="null"){
    console.log(1);
    
    deleteMutli.length=0;
    if(ev=='null'){
    }else{
      deleteMutli.push(...ev)
    }
  }else{
    console.log(2);
    let nn=0
  deleteMutli.forEach((v,i)=>{
    if(ev.id==v.id){
      deleteMutli.splice(i,1)
      nn=1
    }  
  });
  if(nn==0){
    deleteMutli.push(ev)
  }
  }
  console.log(deleteMutli);
  
}
let render=(v)=>{
  tableData1.length=0;
  tableDataAll.length=0;
  findAll(v).then((res)=>{
  console.log(res.data.data);
  let n=res.data.data.map((v)=>{
    delete v.companyName
    let time=new Date(v.date)
    let year=time.getFullYear()
    const month = ('0' + (time.getMonth() + 1)).slice(-2);
    const day = ('0' + time.getDate()).slice(-2);
    console.log(year+'-'+month+'-'+day); 
    v.date= year+'-'+month+'-'+day
    if(v.date=='1970-01-01' || v.state=='未预约'){
      v.date=''
    }
    return v
  })
  tableData1.push(...n)
  tableDataAll.push(...n)
})
watch(tableData1,()=>{
  tableData2.length=0;
  pageSum.value=tableData1.length
  tableData2.push(...tableData1.slice(0,pageSize.value));
})
}
let createMenu=(v)=>{
  if(n1<v.length){
    findSubOrganOrder(v[n1]).then((data1)=>{
    allInstitutionOrder.push({
      orderId:data1.data.data.id,
      orderName:data1.data.data.name,
      subOrganId:data1.data.data.subOrganId,
      subOrganName:data1.data.data.subOrganName,
    })  
    n1++;
    createMenu(v)
  })
  }else{
    n1=0; 
    allInstitution.push({name:'全部',id:100})
    allInstitutionOrder.forEach((v,j)=>{
      allInstitution.forEach((h,i)=>{
        if(h.name==v.subOrganName){
          allInstitution.splice(i,1)
        }
      })
      allInstitution.push({name:v.subOrganName,id:v.subOrganId})
    })
    allInstitution.splice(0,1)
    console.log(allInstitution);
    
  }
}
let n1=0
onMounted(()=>{
render(route.query.companyId)
findAllInsOrder(route.query.companyId).then(({data})=>{
  console.log(data);
  let n2=data.data[0].pid;
  n2=n2.slice(1,-1);
  n2=n2.split(',')
  createMenu(n2)
})
})
/////////////////////////////////////
let company: {name: string;id: number;}[] = reactive([
  {name: "海尔集团",id: 1,},
  {name: "美的集团",id: 2,}
]);
let series: {name: string;id: number;}[] = reactive([
  {name: "123456",id: 1,},
  {name: "234567",id: 2,},
]);
let gender: {name: string;id: number;}[] = reactive([
  {name: "男",id: 1,},
  {name: "女",id: 2,},
  {name: "全部",id: 3,},
]);
let merry: {name: string;id: number;}[] = reactive([
  {name: "已婚",id: 1,},
  {name: "未婚",id: 2,},
  {name: "离异",id: 3,},
  {name: "全部",id: 4,},
]);
let status: {name: string;id: number;}[] = reactive([
  {name: "待体检",id: 1,},
  {name: "已体检",id: 2,},
  {name: "已取消",id: 3,},
  {name: "未预约",id: 4,},
  {name: "全部",id: 5,}
]);
///////////////////////////////////////
let ChosedCampany = ref("海尔集团");
let ChosedGender = ref("全部");
let ChosedMerry = ref("全部");
let ChosedInstitution = ref("全部");
let ChosedDepartment = ref("UI");
let ChosedStatus = ref("全部");
///////////////////////////////////////
let getCompany = (ev) => {
  ChosedCampany.value = ev;
};
let getGender = (ev) => {
  ChosedGender.value = ev;
  deepChoose()
};
let getMerry = (ev) => {
  ChosedMerry.value = ev;
  deepChoose()
};
let getInstitution = (ev) => {
  allOrder.length=0
  ChosedInstitution.value = ev;
  allOrder.push({name:'全部',id:100})
  allInstitutionOrder.forEach((v)=>{
    if(v.subOrganName==ev){
      allOrder.push({name:v.orderName,id:v.orderId})
      chosedSubOrganId.value=Number(v.subOrganId)
    }
  })
  chosedOrder.value=allOrder[0].name
  deepChoose()
};
let getDepartment= (ev) => {
  ChosedDepartment.value = ev;
};
let getStatus= (ev) => {
  ChosedStatus.value = ev;
  deepChoose()
};
let chosedOrderId=ref()
let chosedSubOrganId=ref()
let getOrder= (ev) => {
  chosedOrder.value = ev;
  allOrder.forEach((v)=>{
    if(v.name==ev){
      chosedOrderId.value=Number(v.id)
    }
  })
  deepChoose()
};
//////////////////////////////////////
let searchInput=ref()
let SearchInputName=ref()
let SearchInputTel=ref()
let SearchInputIdCard=ref()
let SearchInputDepartment=ref()
let getSearchInput=(ev)=>{
    searchInput.value=ev
}
let getSearchInputName=(ev)=>{
    SearchInputName.value=ev
}
let getSearchInputTel=(ev)=>{
    SearchInputTel.value=ev
}
let getSearchInputIdCard=(ev)=>{
    SearchInputIdCard.value=ev
}
let getSearchInputDepartment=(ev)=>{
    SearchInputDepartment.value=ev
}
let searchOne=()=>{
  if(searchInput.value==undefined){
    return
  }else if(Number(searchInput.value)==searchInput.value){
    tableData1.length=0
    tableDataAll.forEach((v)=>{
      if(searchInput.value==v.tel){
        tableData1.push(v)
      }
    })
  }else{
    tableData1.length=0
    tableDataAll.forEach((v)=>{
      if(searchInput.value==v.name){
        tableData1.push(v)
      }
    })
  }
  searchInput.value=''
}
let deepChoose=()=>{
  tableData1.length=0
  console.log(tableData1,chosedOrder.value,1111);
  tableDataAll.forEach((v)=>{
    if((ChosedGender.value==v.sex || ChosedGender.value=='全部')
    && (ChosedMerry.value==v.marriage||ChosedMerry.value=='全部')
    && (ChosedInstitution.value==v.organName||ChosedInstitution.value=='全部')
    && (chosedOrder.value==v.comboName||chosedOrder.value=='请先选择机构'||chosedOrder.value=='全部')
    && (ChosedStatus.value==v.state||ChosedStatus.value=='全部')
    ){
      tableData1.push(v)
    }
  })
  
}
let deleteAll=()=>{
  let nn=[]
  deleteMutli.forEach((v)=>{
    nn.push(v.id)
  })
  delete1All({ids:nn}).then((res)=>{
    ElMessage('删除成功')
    setTimeout(()=>{
      history.go(0)
    },500)
  })
}
</script>
